<template>
    <div class="white-box">
        <el-steps :active="active" align-center>
            <el-step :title="item.title" :description="item.desc" v-for="item in stepArrs" :key="item.title" />
        </el-steps>
    </div>
    <div class="white-box">
        <title-more title="基本信息" />
        <div class="od-one">
            <div class="od-one__item">
                <detail-item title="订单信息" size="15px" title-color="#323233" :weight="500" title-align="left" />
                <detail-item
                    title="订单状态"
                    one-value
                    bottom="16px"
                    :value="`${objs.order_status_label}(${objs.order_status_warning})`"
                    value-color="#4B93FA"
                    title-align="left"
                    title-width="auto"
                />
                <detail-item title="订单编号" one-value bottom="16px" :value="objs.order_sn" title-align="left" title-width="auto" />
                <detail-item title="付款方式" one-value bottom="16px" :value="objs.pay_code" title-align="left" title-width="auto" />
                <detail-item title="支付时间" one-value bottom="16px" :value="objs.pay_time" title-align="left" title-width="auto" v-if="objs.pay_time" />
            </div>
            <div class="od-one__item">
                <detail-item title="会员信息" size="15px" title-color="#323233" :weight="500" title-align="left" title-width="auto" />
                <template v-if="objs.user">
                    <detail-item title="会员UID" one-value bottom="16px" :value="objs.user.uid" title-align="left" title-width="auto" />
                    <detail-item title="会员昵称" one-value bottom="16px" :value="objs.user.nickname || '--'" title-align="left" title-width="auto" />
                    <detail-item title="会员姓名" one-value bottom="16px" :value="objs.user.name || '--'" title-align="left" title-width="auto" />
                    <detail-item title="联系电话" one-value bottom="16px" :value="objs.user.mobile || '--'" title-align="left" title-width="auto" />
                </template>
            </div>
            <div class="od-one__item">
                <detail-item title="收货人信息" size="15px" title-color="#323233" :weight="500" title-width="auto" />
                <detail-item title="收货人" one-value bottom="16px" :value="objs.contact || '--'" title-width="auto" />
                <detail-item title="联系电话" one-value bottom="16px" :value="objs.mobile || '--'" title-width="auto" />
                <detail-item title="收货地址" two-value bottom="16px" :value="objs.addr + objs.house" title-width="auto" />
            </div>
        </div>
        <title-more title="订单补充" />
        <detail-item title="商户单号" one-value bottom="16px" :value="objs.trade_no" title-width="auto" />
        <detail-item title="货架编号" one-value bottom="16px" :value="`${objs.shelve_title || '-'}${objs.shelve_num || '-'}`" title-width="auto" />
        <detail-item title="订单备注" one-value bottom="16px" :value="objs.intro || '--'" title-width="auto" />
        <detail-item title="平台备注" one-value bottom="40px" :value="objs.admin_msg || '--'" title-width="auto" />

        <title-more title="特殊需求" />
        <div v-if="objs.have_extra == 1">
            <detail-item
                :title="item.title"
                one-value
                bottom="16px"
                :value="item.content"
                title-width="auto"
                v-for="(item, index) in objs.extra_list"
                :key="index"
            />
        </div>
    </div>
    <!-- <div class="white-box">
        <title-more title="佣金信息" />
        <detail-item title="大团长" one-value bottom="16px">
            <div class="detail-item-diy">
                {{ objs.large_group.name }}<span class="detail-item__price"><em>￥</em>{{ objs.large_group.price }}</span
                >{{ objs.large_group.rules }}
            </div>
        </detail-item>
        <detail-item title="中团长" one-value bottom="16px">
            <div class="detail-item-diy">
                {{ objs.middle_group.name }}<span class="detail-item__price"><em>￥</em>{{ objs.middle_group.price }}</span
                >{{ objs.middle_group.rules }}
            </div>
        </detail-item>
        <detail-item title="小团长" one-value bottom="16px">
            <div class="detail-item-diy">
                {{ objs.small_group.name }}<span class="detail-item__price"><em>￥</em>{{ objs.small_group.price }}</span
                >{{ objs.small_group.rules }}
            </div>
        </detail-item>
    </div> -->

    <!-- 验货信息 -->
    <div class="white-box" v-if="objs.exams">
        <title-more title="验货信息" />
        <detail-item title="验货人" one-value bottom="16px" :value="objs.exams.name" />
        <detail-item title="验货时间" one-value bottom="16px" :value="objs.exams.exams_time" />
        <detail-item title="验货结果" one-value bottom="16px" :value="objs.exams.exams_result" />
        <detail-item title="验货备注" one-value bottom="16px" :value="objs.exams.exams_reamrks || '-'" />
    </div>

    <!-- 入位信息 -->
    <div class="white-box" v-if="objs.seats">
        <title-more title="入位信息" />
        <detail-item title="入位人" one-value bottom="16px" :value="objs.seats.seat_user" />
        <detail-item title="入位时间" one-value bottom="16px" :value="objs.seats.seat_at_label" />
        <detail-item title="入位状态" one-value bottom="16px" :value="objs.seats.seat_type_label" />
        <detail-item title="入位备注" one-value bottom="16px" :value="objs.seats.seat_remarks || '-'" />
    </div>

    <!-- 物流信息 -->
    <div class="white-box" v-if="objs.express_type">
        <title-more title="物流信息" />
        <detail-item title="配送方式" one-value bottom="16px" :value="objs.company_group || '快递物流'" />
        <detail-item title="物流公司" one-value bottom="16px" :value="objs.express_type" />
        <detail-item title="物流单号" one-value bottom="16px" :value="objs.express_number" />
        <detail-item title="物流要求" one-value bottom="16px" :value="expressLabel[objs.express_require]" />
    </div>

    <div class="white-box">
        <title-more title="商品信息" />
        <el-table
            class="table-mb"
            v-loading="loading"
            :data="objs.order_product"
            :header-cell-style="{ background: '#F5F7FA' }"
            element-loading-background="rgba(255, 255, 255, 0.6)"
        >
            <el-table-column label="商品信息" min-width="240">
                <template #default="{ row }">
                    <div class="table-lr">
                        <el-image class="table-lr__img" loading="lazy" :src="proxy.imgUrl + row.product_img + '!img_400'" fit="cover" v-if="row.product_img" />
                        <div class="table-lr__right">
                            <p class="lr-title line-one">{{ row.product_name }}</p>
                            <p class="lr-text line-one">等级：{{ row.level }}，颜色：{{ row.color }}</p>
                            <p class="lr-text line-one">分类：{{ row.cate_title }}</p>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="单价" width="110">
                <template #default="{ row }">
                    <p style="font-size: 14px"><em style="font-size: 13px">￥</em>{{ row.product_price }}</p>
                </template>
            </el-table-column>
            <el-table-column label="供应价" min-width="110">
                <template #default="{ row }">
                    <p style="font-size: 14px"><em style="font-size: 13px">￥</em>{{ row.cost_price }}</p>
                </template>
            </el-table-column>
            <el-table-column label="商品数量" min-width="120">
                <template #default="{ row }">
                    <p>购买数：<span style="color:#4B93FA">{{ row.product_number }}</span></p>
                    <p>已取消：<span style="color:#4B93FA">{{ row.cancel_num }}</span></p>
                    <p>降级数：<span style="color:#4B93FA">{{ row.demotion_num }}</span></p>
                </template>
            </el-table-column>
            <el-table-column label="实际购买数" min-width="100">
                <template #default="{ row }">
                    <p style="color:#4B93FA">{{ row.user_num }}</p>
                </template>
            </el-table-column>
            <el-table-column label="规格" min-width="120">
                <template #default="{ row }">
                    <p>{{ row.norm }}/{{ row.unit }}</p>
                </template>
            </el-table-column>
            <el-table-column label="供应商" min-width="200">
                <template #default="{ row }">
                    <p v-if="row.supplier_id">{{ row.supplier_name }}[ID:{{ row.supplier_id }}]</p>
                </template>
            </el-table-column>
            <el-table-column label="小计" min-width="110">
                <template #default="{ row }">
                    <p style="font-size: 15px"><em style="font-size: 13px">￥</em>{{ row.sub_total }}</p>
                </template>
            </el-table-column>
            <el-table-column label="备注" min-width="180">
                <template #default="{ row }">
                    <p>{{ row.reason }}</p>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="100" class-name="operation-nav" fixed="right">
                <template #default="{ row }">
                    <el-button link type="primary" class="theme-btn" @click="clickCancel(row)" v-if="row.user_num > 0">退款退货</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="good-foot">
            <div class="good-foor__item">
                <span class="good-foor__left">商品总价：</span>
                <p class="good-foor__right"><em>￥</em>{{ good_total_price || 0 }}</p>
            </div>
            <div class="good-foor__item">
                <span class="good-foor__left">优惠金额：</span>
                <p class="good-foor__right"><em>￥</em>{{ objs.youhui_amount || 0 }}</p>
            </div>
            <div class="good-foor__item">
                <span class="good-foor__left">余额抵扣：</span>
                <p class="good-foor__right"><em>￥</em>{{ objs.money || 0 }}</p>
            </div>
            <div class="good-foor__item">
                <span class="good-foor__left">预收运费：</span>
                <p class="good-foor__right"><em>￥</em>{{ objs.order ? objs.order.pre_freight : 0 }}</p>
            </div>
            <div class="good-foor__item">
                <span class="good-foor__left">实际运费：</span>
                <p class="good-foor__right"><em>￥</em>{{ objs.order ? objs.order.freight : 0 }}</p>
            </div>
            <div class="good-foor__item">
                <span class="good-foor__left">预收包装费：</span>
                <p class="good-foor__right"><em>￥</em>{{ objs.order ? objs.order.pre_pack_amount : 0 }}</p>
            </div>
            <div class="good-foor__item">
                <span class="good-foor__left">实际包装费：</span>
                <p class="good-foor__right"><em>￥</em>{{ objs.order ? objs.order.pack_amount : 0 }}</p>
            </div>
            <div class="good-foor__item">
                <span class="good-foor__left good-large">实际支付：</span>
                <p class="good-foor__right good-large"><em>￥</em>{{ objs.amount }}</p>
            </div>
        </div>
    </div>

    <!-- 退款退货 -->
    <el-dialog v-model="dialogCancel" title="退款退货" width="640px" :append-to-body="true" :destroy-on-close="true" @close="closeCancel">
        <div class="tag-item">
            <div class="tag-item__label">订单商品ID</div>
            <div class="tag-item__right">{{ itemObj.order_product_id }}</div>
        </div>
        <div class="tag-item">
            <div class="tag-item__label">剩余可退数</div>
            <div class="tag-item__right">{{ itemObj.user_num }}</div>
        </div>
        <div class="tag-item">
            <div class="tag-item__label">退款/货数量</div>
            <div class="tag-item__right">
                <el-input-number v-model="cancel_nums" :min="1" :max="itemObj.user_num" />    
            </div>
        </div>
        <div class="tag-item">
            <div class="tag-item__label">退款/货原因</div>
            <div class="tag-item__right">
                <el-input v-model.trim="reason" type="textarea" clearable :rows="4" placeholder="请输入退款/货原因" />
            </div>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" :loading="form_loading" @click="confirmCancel">确认</el-button>
                <el-button @click="closeCancel">取消</el-button>
            </span>
        </template>
    </el-dialog>

    <go-back />
</template>

<script setup>
import { getCurrentInstance, ref, onMounted } from "vue"
import { useRoute } from "vue-router"
import DetailItem from "@components/DetailItem.vue"
import TitleMore from "@components/title-more.vue"
import GoBack from "@components/GoBack.vue"

const route = useRoute()
const { proxy } = getCurrentInstance()

const oid = route.query.oid
onMounted(() => {
    oid && getDetail()
})

const expressLabel = ["早班", "中班", "晚班"]
const active = ref(1)
const stepArrs = ref([
    {
        title: "下单时间",
        desc: "",
    },
    {
        title: "打包时间",
        desc: "",
    },
    {
        title: "交货时间",
        desc: "",
    },
    {
        title: "平台发货",
        desc: "",
    },
    {
        title: "完成时间",
        desc: "",
    },
])
const loading = ref(false)
const objs = ref({})
const good_total_price = ref("") // 商品总价
function getDetail() {
    loading.value = true
    proxy.$axios
        .get("order/detail", {
            params: {
                order_id: oid,
            },
        })
        .then((res) => {
            loading.value = false
            if (res.data.code == 0) {
                let result = res.data.data
                stepArrs.value[0].desc = result.created_at_label || ""
                stepArrs.value[1].desc = result.pack_staff_time || ""
                stepArrs.value[2].desc = result.delivery_staff_time || ""
                stepArrs.value[3].desc = result.delivery_time || ""
                stepArrs.value[4].desc = result.last_time_label || ""
                if (result.order_status < 4) {
                    active.value = 1
                } else if (result.order_status >= 4 && result.order_status < 6) {
                    active.value = 2
                } else if (result.order_status >= 6 && result.order_status < 7) {
                    active.value = 3
                } else if (result.order_status == 7) {
                    active.value = 4
                } else {
                    active.value = 5
                }

                let total = 0
                if (result.order_product && result.order_product.length > 0) {
                    result.order_product.map((item) => {
                        total += Number(item.sub_total)
                    })
                }
                good_total_price.value = total.toFixed(2)
                objs.value = result
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {
            loading.value = false
        })
}

// 取消订单
const reason = ref("")
const cancel_nums = ref(1)
const itemObj = ref({})
const form_loading = ref(false)
const dialogCancel = ref(false)
const clickCancel = (row) => {
    itemObj.value = row
    dialogCancel.value = true
}
// 确认取消
const confirmCancel = () => {
    if (reason.value == "") {
        proxy.$message({ message: "请填写退款/货原因", type: "warning" })
        return
    }
    form_loading.value = true
    proxy.$axios
        .post("order/product/cancel", {
            pid: itemObj.value.order_product_id,
            cancel_num: cancel_nums.value,
            reason: reason.value,
        })
        .then((res) => {
            dialogCancel.value = false
            form_loading.value = false
            if (res.data.code == 0) {
                proxy.$message({ message: "操作成功！", type: "success" })
                getDetail()
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {
            dialogCancel.value = false
            form_loading.value = false
        })
}
const closeCancel = () => {
    dialogCancel.value = false
    form_loading.value = false
    itemObj.value = {}
    cancel_nums.value = 1
    reason.value = ''
}
</script>
<script>
export default {
    name: "OrderDetail",
}
</script>

<style lang="less" scoped>
.tag-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: @margin-md;
    .tag-item__label {
        flex: none;
        text-align: right;
        width: 140px;
        padding-right: @padding-md;
        font-size: @font-size-md;
        color: @gray-8;
    }

    .tag-item__right {
        flex: none;
        width: 400px;
    }
}
.good-foot {
    .good-foor__item {
        display: flex;
        justify-content: flex-end;
        font-size: 15px;
        color: @gray-8;
        margin-bottom: @margin-xs;
        .good-foor__left {
            flex: none;
            width: 140px;
            text-align: right;
        }
        .good-foor__right {
            flex: none;
            width: 120px;
        }
        .good-large {
            font-weight: bold;
            font-size: @font-size-lg;
        }
    }
}
.good-price {
    color: @red;
    font-size: @font-size-lg;
    em {
        font-size: @font-size-md;
    }
}
.detail-item__price {
    color: @red;
    padding: 0px @padding-base;
    font-weight: bold;
    em {
        font-size: 13px;
    }
}
.od-one {
    display: flex;
    margin-bottom: @margin-xl;
    .od-one__item {
        flex: none;
        width: 33.33%;
        p {
            width: 100%;
            margin-bottom: @margin-sm;
            font-size: @font-size-md;
            color: @gray-8;
            .price-icon {
                font-size: @font-size-sm;
            }
        }
    }
}
</style>
